<!-- Dom模板 -->
<template>
  <div class="box">
    <!-- Dom内容 -->
    <!-- search -->
    <div class="search">
      <p>
        角色名称：<input
          type="text"
          placeholder="请输入角色名称"
          v-model="searVal"
        />
      </p>
      <p>
        状态：
        <select ref="searchState">
          <option value="全部">全部</option>
          <option v-for="item in options" :key="item.value" :value="item.label">
            {{ item.label }}
          </option>
        </select>
      </p>
      <p>
        <button class="searchBtn" @click="searchBtn()">搜索</button>
        <button class="resetBtn" @click="reset()">重置</button>
      </p>
    </div>
    <!-- add -->
    <div class="add">
      <button class="addBtn" @click="setAlert(true)">新增</button>
      <button class="blockUp" @click="blockUps()">停用</button>
      <button class="del" @click="batchDel()">删除</button>
      <button class="export">导出</button>
    </div>
    <!-- table -->
    <div class="table">
      <table>
        <thead>
          <tr>
            <td><input type="checkbox" v-model="checkAll" /></td>
            <td>序号</td>
            <td>角色名称</td>
            <td>所属组织</td>
            <td>创建人</td>
            <td>创建时间</td>
            <td>状态</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item, index) in this.roleAdministratorState.data"
            :key="index"
          >
            <td><input type="checkbox" :checked="item.isCheck" @change="changeCheck(index)" /></td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.organization }}</td>
            <td>{{ item.creator }}</td>
            <td>{{ item.createTime }}</td>
            <td>{{ item.state === "1" ? "已启用" : "已停用" }}</td>
            <td>
              <span @click="detailData(item)">查看详情</span>
              <span @click="amendData(item)">修改</span>
              <span @click="blockState({ id: item.id, state: item.state })"
                >停用</span
              >
              <span @click="deleteItem(item.id)">删除</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加弹框 -->
    <addAlert v-if="this.roleAdministratorState.showAlert"></addAlert>
    <!-- 修改弹框 -->
    <amendRole
      v-if="this.roleAdministratorState.showAmendAlert"
      :amendRoleVal="amendRoleVal"
    ></amendRole>
    <!-- 修改弹框 -->
    <lookDetails
      v-if="this.roleAdministratorState.showDetailsAlert"
      :detailsVal="detailsVal"
    ></lookDetails>
  </div>
</template>

<script>
// 添加弹框
import addAlert from "./addRole";
// 修改弹框
import amendRole from "./amendRole";
// 查看详情弹框
import lookDetails from "./lookDetails";
// vuex辅助函数
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  name: "",
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "使用中",
        },
        {
          value: "选项2",
          label: "已停用",
        },
      ],
      value: "",
      // 修改弹框中数据
      amendRoleVal: {},
      // 查看详情中数据
      detailsVal: {},

      blockVal: "停用", //停用

      searVal: "", //搜索
    };
  },
  computed: {
    ...mapState({
      roleAdministratorState: "roleAdministrator",
    }),

    // 全选反选
    checkAll: {
      get() {
        return this.roleAdministratorState.data.every((item) =>  item.isCheck);
      },
      set(val) {
        return this.roleAdministratorState.data.forEach((item) => {
          return item.isCheck = val;
        });
      },
    },
  },
  components: {
    addAlert, //添加弹框
    amendRole, //修改弹框
    lookDetails, //查看详情弹框
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
<<<<<<< HEAD
    // let data  = await API.getdata()
    // console.log(data);
    this.data = this.$store.state.roleAdministrator.data;
    // console.log(this.$store.state.roleAdministrator);
    this.getData()
=======
    // 调用vue异步获取数据函数
    this.getData();
>>>>>>> standbyBranch
  },
  // Vue方法定义
  methods: {
    ...mapActions({
      getData: "roleAdministrator/getData",
      deleteData: "roleAdministrator/deleteData",
      setState: "roleAdministrator/setState",
      setStates: "roleAdministrator/setStates",
      batchDeletes: "roleAdministrator/batchDeletes",
    }),
    ...mapMutations({
      setAlert: "roleAdministrator/setAlert",
      setAmendAlert: "roleAdministrator/setAmendAlert",
      setDetailsAlert: "roleAdministrator/setDetailsAlert",
      searchFun: "roleAdministrator/searchFun",
      setCheckAll: "roleAdministrator/setCheckAll",
    }),

    // 全选反选
    changeCheck(index) {
      this.setCheckAll(index);
    },

    // 修改
    amendData(item) {
      this.setAmendAlert(true);

      this.amendRoleVal = item;
    },
    // 查看详情
    detailData(item) {
      this.setDetailsAlert(true);
      this.detailsVal = item;
    },
    // 删除
    deleteItem(id) {
      this.deleteData(id);
      this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
    },
    // 停用
    blockState(res) {
      this.setState(res);
      this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
    },

    // 搜索
    searchBtn() {
      this.searchFun({
        name: this.searVal,
        state: this.$refs.searchState.value === "使用中" ? "1" : "0",
      });
    },

    // 重置
    reset() {
      this.getData();
    },
    
    // 批量停用
    blockUps(){
      let idData = this.roleAdministratorState.data.filter(item => {
        if(item.isCheck){
          return item.id
        }
      }).map(item => {
        return ['0',item.id]
      })
      this.setStates(idData)
      this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
    },
    // 批量删除
    batchDel(){
      let idData = this.roleAdministratorState.data.filter(item => {
        if(item.isCheck){
          return item.id
        }
      }).map(item => {
        return [item.id]
      })
      this.batchDeletes(idData)
      this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
    }
   
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.box {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #e8e8e8;
}
/* search */
.box .search {
  width: 100%;
  display: flex;
  height: 40px;
  align-items: center;
}
.box .search p {
  margin-right: 30px;
}
.box .search p input {
  height: 35px;
  outline: none;
}
.box .search p select {
  height: 35px;
  width: 100px;
  outline: none;
}
.box .search p button {
  margin-right: 5px;
  border: none;
  outline: none;
  width: 100px;
  height: 35px;
  border-radius: 5px;
  color: #fff;
}
.box .search p button.searchBtn {
  background: #3894ff;
}
.box .search p button.resetBtn {
  background: #e29836;
}
/* add */
.box .add {
  height: 100px;
  display: flex;
  align-items: center;
}
.box .add button {
  width: 100px;
  height: 35px;
  border-radius: 5px;
  border: none;
  outline: none;
  margin-right: 10px;
}
.box .add .addBtn {
  background: #3894ff;
  color: #fff;
}
.box .add .blockUp {
  background: #e09737;
  color: #fff;
}
.box .add .del {
  background: #ef4545;
  color: #fff;
}
.box .add .export{
  background: #3894ff;
  color: #fff;
}
/* table */
.box .table {
  width: 90%;
  background: #fff;
}
.box .table table {
  border-collapse: collapse;
  border: none;
}
.box .table table {
  width: 100%;
}
tr {
  width: 100%;
  height: 40px;
}
tr:nth-child(even){
  background: #f0f0f0;
}
td {
  text-align: center;
  padding:10px;
}
.box .table table thead {
  width: 100%;
  background: #f0f0f0;
}
.box .table table tbody tr td:last-child span {
  color: rgba(2, 94, 231, 100);
  padding-right: 10px;
}
</style>